<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    /* 
    一、减少HTTP的请求次数和传输报文的大小
      - CSS SPRITE (雪碧图 图片精灵)
      - iconFont(字体图标)或者使用SVG的矢量图
          + 减少请求的次数，或者减少请求的质量
          + 渲染时按照代码进行渲染，要更快，而位图(png/jpeg/jpg/gif)是需要先把图片进行编码在去渲染
          + 图片不容易失真

      - 懒加载
          + 图片的懒加载
          + 当前的页面加载完，那下边的页面用户看不见的地方的数据可以先不加载(节约流量，减轻服务器的压力)
      - 取消音视频的预加载(一个事不加载 preload = 'none',还有一个就是分段加载)
      - 客户端与服务端的数据传输尽可能拿JSON格式完成，XML格式要比JSON格式质量大
      - 把页面中的css文件和js文件等进行合并压缩(后期webpack会帮咱们处理)

      - 做CDN(地域分布式服务器)、加服务器
      - 图片做base64转码(把图片转化成base64编码，可以减少图片的请求次数，提高页面的渲染速度，但是不利于开发和维护，用webpack可以实现图片的批量base64转化，这个过程也是webpack去做)



    二、设置各种缓存、预处理和长连接
      - 把不经常改动的静态资源文件做缓存处理(一般都是做304缓存etag协商缓存)
      - DNS缓存和预处理，减少DNS的查找
      - 设置本地的离线缓存(manifest)或者把一些不经常更改的数据放到本地存储(webstorage)
      - Connection: keep-alive ：保持长连接
      - 建立 Cache-Control和 HTPP强缓存
      - 使用http2版本协议(现在咱们用的都是http1.xxx)

    三、代码方面的优化
      - 减少对闭包的应用(因为闭包会产生不销毁的作用域，在占用内存，如果js掌握的不好，写出了死递归的代码了，这样就会导致堆栈溢出)
      - 避免过多和嵌套的循环
      - 对于动画来说，用能css解决的就不用js(能用transform就不用别的)，能用requestAnimationFrame，就不用定时器
          + requestAnimationFrame还有一个优势，当前页面处于休眠状态的时候，可以停止动画的运行，当你在结束休眠的时候在开辟动画
      - 减少对DOM的操作(用框架)
      - 尽可能使用事件委托
      - 函数的防抖和节流
      - 尽可能的减少css样式的层级(选择器是从右往左解析的) .box a {}    a {}
      - 在项目里边尽可能的使用异步，来模拟出多线程的执行机制，避免主线程的阻塞
      - 堆栈内存的手动释放(赋值为null)
      - 对于数据的请求加载尽可能的分批请求(分页)
     */

    // function fn(){
    //   // 使用递归的时候都有结束的条件
    //   fn()
    // }
    // fn()

    // for(let i = 0;i<1000000000000;i++){
    //     // 阻塞线程
    // }

    // for (let i = 0; i < 4; i++) {
    //   for (let i = 0; i < 10; i++) {
    //     console.log(1);
    //   }
    // }



  </script>
</body>

</html>